<template>
	<div class="com-container">
		<div class="title" :style="comStyle">
			<span>{{ '▎ ' +  showTitle }}</span>
			<span class="iconfont title-icon" :style="comStyle" @click="showChoice = !showChoice">&#xe6eb;</span>
			<div class="select-con" v-show="showChoice" :style="marginStyle">
				<div class="select-item" v-for="item in selectTypes" :key="item.key" @click="handleSelect(item.key)">
					{{ item.text }}
				</div>
			</div>
		</div>
		<div class="com-chart" ref="trend_ref">ceshi</div>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getThemeValue
	} from '@/utils/theme_utils'
	export default {
		name: 'Trend',
		data() {
			return {
				chartInstance: null,
				allData: null,
				echartoption: {},
				showChoice: false,
				choiceType: "map",
				titleFontSize: 0 // 指明标题的字体大小
			}
		},
		created() {
			this.$socket.registerCallBack('trendData', this.getData)
		},
		mounted() {
			this.initChart();
			//this.getData();
			this.$socket.send({
				action: 'getData',
				socketType: 'trendData',
				chartName: 'trend',
				value: ''
			})
			window.addEventListener("resize", this.screenAdapter);
			this.screenAdapter()
		},
		destroyed() {
			window.removeEventListener("resize", this.screenAdapter);
			this.$socket.unRegisterCallBack('trendData');
		},
		computed: {
			selectTypes() {
				if (!this.allData) {
					return []
				} else {
					return this.allData.type.filter(item => {
						return item.key !== this.choiceType
					})
				}
			},
			showTitle() {
				if (!this.allData) {
					return ''
				} else {
					return this.allData[this.choiceType].title
				}
			},
			// 设置给标题的样式
			comStyle() {
				return {
					fontSize: this.titleFontSize + 'px',
					color: getThemeValue(this.theme).titleColor
				}
			},
			marginStyle() {
				return {
					marginLeft: this.titleFontSize + 'px'
				}
			},
			...mapState(['theme'])
		},
		methods: {
			//初始化图表
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.trend_ref, this.theme);
				this.echartoption = {
					backgroundColor: getThemeValue(this.theme).backgroundColor,
					title: {
						left: 20,
						top: 20
					},
					grid: {
						top: "20%",
						left: "6%",
						right: "6%",
						bottom: "6%",
						containLable: true
					},
					legend: {
						left: 20,
						top: "15%",
						icon: "circle",
						textStyle: {
							color: "auto"
						}
					},
					xAxis: {
						type: "category",
						axisLine: {
							show: true,
							lineStyle: {
								color: "auto"
							},
						},
						splitLine: {
							show: false,
						},
						axisLabel: {
							textStyle: {
								color: 'auto'
							}
						},
						boundaryGap: false
					},
					yAxis: {
						type: 'value',
						axisLine: {
							show: true,
							lineStyle: {
								color: "auto"
							}
						},
						splitLine: {
							show: false,
						},
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: "shadow",
							z: -1,
							shadowStyle: {
								color: '#2d3443'
							}
						}
					}
				};
				this.chartInstance.setOption(this.echartoption);
			},
			//获取数据
			getData(ret) {
				// const {
				// 	data: ret
				// } = await this.$http.get("trend");
				this.allData = ret;
				this.updataChart()
			},
			//更新图表
			updataChart() {
				// 半透明的颜色值
				const colorArr1 = [
					'rgba(84, 112, 198, 0.5)',
					'rgba(145, 204, 117, 0.5)',
					'rgba(250, 200, 88, 0.5)',
					'rgba(238, 102, 102, 0.5)',
					'rgba(115, 192, 222, 0.5)'
				]
				// 全透明的颜色值
				const colorArr2 = [
					'rgba(84, 112, 198, 0)',
					'rgba(145, 204, 117, 0)',
					'rgba(250, 200, 88, 0)',
					'rgba(238, 102, 102, 0)',
					'rgba(115, 192, 222, 0)'
				]
				const timeArr = this.allData.common.month;
				const valueArr = this.allData[this.choiceType].data;
				const seriesArr = valueArr.map((val, ind) => {
					return {
						smooth: true,
						showSymbol: false,
						name: val.name,
						type: "line",
						data: val.data,
						stack: this.choiceType,
						areaStyle: {
							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: colorArr1[ind]
								},
								{
									offset: 1,
									color: colorArr2[ind]
								}
							])
						},
					}
				});
				const legendArr = valueArr.map((val, ind) => {
					return val.name
				});
				const dataoption = {
					xAxis: {
						data: timeArr
					},
					legend: {
						data: legendArr
					},
					series: seriesArr
				};
				this.chartInstance.setOption(dataoption);
			},
			screenAdapter() {
				this.titleFontSize = this.$refs.trend_ref.offsetWidth / 100 * 3.6
				const adapterOption = {
					legend: {
						itemWidth: this.titleFontSize,
						itemHeight: this.titleFontSize,
						itemGap: this.titleFontSize,
						textStyle: {
							fontSize: this.titleFontSize / 2
						}
					}
				}
				this.chartInstance.setOption(adapterOption)
				this.chartInstance.resize()
			},
			handleSelect(currentType) {
				this.choiceType = currentType
				this.updataChart()
				this.showChoice = false
			}
		},
		watch: {
			theme() {
				console.log('主题切换了')
				this.chartInstance.dispose() // 销毁当前的图表
				this.initChart() // 重新以最新的主题名称初始化图表对象
				this.screenAdapter() // 完成屏幕的适配
				this.updataChart() // 更新图表的展示
			}
		}
	}
</script>

<style lang="less" scoped>
	.title {
		position: absolute;
		left: 20px;
		top: 20px;
		z-index: 10;
		color: white;

		.title-icon {
			margin-left: 10px;
			cursor: pointer;
		}

		.select-con {
			background-color: #222733;
		}
	}
</style>
